<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: #58bc58;
      }
      #box2 {
        width: 200px;
        height: 200px;
        background: palevioletred;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>1.下拉菜单 条件渲染 v-if和v-show</h2>
      <input type="button" value="下拉菜单" @click="isshow = !isshow" />
      <!-- v-if是通过创建和删除的方法显示隐藏节点 -->
      <div id="box" v-if="isshow"></div>
      <!-- <div id="box2" v-else></div> -->
      <!-- <div id="box" v-show="isshow"></div> -->

      <h2>2.列表渲染 v-for</h2>
      <ul>
        <li v-for="(item, index) in list">
          <!-- <li>1.马云,工资-2000</li> -->
          {{ index + 1 }}.{{ item.name }},工资-{{ item.salary }}
        </li>
      </ul>

      <ul>
        <!-- <li>1.name:罗永浩</li> -->
        <li v-for="(value,key,index) in goods">
          {{ index + 1 }}.{{ key }}:{{ value }}
        </li>
      </ul>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        isshow: true,
        num: 0,
        list: [
          //数组
          {
            name: "马云",
            salary: 2000,
          },
          {
            name: "刘强东",
            salary: 3000,
          },
          {
            name: "小马哥",
            salary: 4000,
          },
        ],
        goods: {
          //对象
          name: "罗老师",
          tel: "锤子手机",
          price: "1999",
        },
      },
    });
  </script>
</html>
